<template>
	<div id="employeeContent">
    <div class="container">
		<header>
        <div class="header-overlay"></div>
        <div class="header-content">
          <div class="logo">
            <i class="fas fa-shipping-fast"></i>
            <span>莱比特物流</span>
          </div>
          <h1>员工培训:打造高效专业的物流团队</h1>
          <p class="subtitle">
            在快速发展的物流行业中，员工的专业能力和服务意识直接影响企业的竞争力和客户满意度。
            为此，莱比特始终将员工培训作为核心战略之一，通过系统化、多元化的培训体系，
            全面提升团队的综合素质，助力公司持续发展。
          </p>
        </div>
      </header>
        <!-- 1. 专业培训体系 -->
        <section class="training-section">
          <div class="section-title">
            <h2><i class="fas fa-graduation-cap"></i>专业培训体系, 提升核心技能</h2>
          </div>
          <p>我们针对不同岗位(如仓储管理、运输调度、客户服务等)设计了定制化培训课程</p>
          
          <div class="training-grid">
            <div class="training-card">
              <h3 class="card-title"><i class="fas fa-cogs"></i>操作技能</h3>
              <div class="card-content">
                <ul class="features-list">
                  <li>物流设备使用</li>
                  <li>订单管理系统操作</li>
                  <li>数据录入与分析</li>
                  <li>订单跟踪及运输调度</li>
                </ul>
              </div>
            </div>
            
            <div class="training-card green">
              <h3 class="card-title"><i class="fas fa-shield-alt"></i>安全规范</h3>
              <div class="card-content">
                <ul class="features-list">
                  <li>货物装卸安全标准</li>
                  <li>危险品处理流程</li>
                  <li>应急处理方案</li>
                  <li>工作场所安全条例</li>
                </ul>
              </div>
            </div>
            
            <div class="training-card purple">
              <h3 class="card-title"><i class="fas fa-book"></i>行业知识</h3>
              <div class="card-content">
                <ul class="features-list">
                  <li>供应链管理基础</li>
                  <li>国际物流法规</li>
                  <li>新兴技术应用(物联网、大数据)</li>
                  <li>行业发展趋势分析</li>
                </ul>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 2. 软实力培养 -->
        <section class="training-section">
          <div class="section-title">
            <h2><i class="fas fa-people-arrows"></i>注重软实力培养，强化服务理念</h2>
          </div>
          <div class="training-grid">
            <div class="training-card">
              <div class="card-content">
                <p>除了专业技能，我们通过沟通技巧、团队协作、客户服务等课程，帮助员工树立"以客户为中心"的服务意识，提升解决问题的能力。</p>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 3. 多元化培训形式 -->
        <section class="training-section">
          <div class="section-title">
            <h2><i class="fas fa-laptop-code"></i>多元化培训形式，灵活高效</h2>
          </div>
          
          <div class="training-grid">
            <div class="training-card orange">
              <h3 class="card-title"><i class="fas fa-globe"></i>线上学习平台</h3>
              <div class="card-content">
                <p>员工可随时随地学习行业最新知识，通过移动端和PC端接入丰富的课程资源，实现碎片化学习。</p>
              </div>
            </div>
            
            <div class="training-card">
              <h3 class="card-title"><i class="fas fa-hands-helping"></i>实战演练</h3>
              <div class="card-content">
                <p>通过模拟操作、案例分析提升应变能力，在真实场景中训练员工应对突发状况的能力。</p>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 4. 持续成长机制 -->
        <section class="training-section">
          <div class="section-title">
            <h2><i class="fas fa-chart-line"></i>持续成长机制，激发员工潜力</h2>
          </div>
          
          <div class="training-grid">
            <div class="training-card">
              <div class="card-content">
                <p>我们设立明确的晋升通道和激励机制，鼓励员工考取专业认证，并提供后续进阶培训，实现个人与公司共同成长。</p>
                <ul class="features-list">
                  <li>职业发展双通道（管理+专业）</li>
                  <li>专业认证奖励计划</li>
                  <li>年度技能提升培训</li>
                  <li>领导力发展项目</li>
                </ul>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 5. 成果与未来规划 -->
        <section class="training-section">
          <div class="section-title">
            <h2><i class="fas fa-trophy"></i>成果与未来规划</h2>
          </div>
          
          <div class="training-grid">
            <div class="training-card">
              <div class="card-content">
                <p>通过持续投入培训，我们的团队在效率、安全性和客户满意度上显著提升。未来，我们将结合智能化物流趋势，进一步升级培训内容，打造行业领先的精英团队。</p>
                <p class="highlight">莱比特坚信，优秀的员工是企业最宝贵的资产。我们将继续以培训为桥梁，赋能每一位成员，为客户提供更高效、可靠的物流服务!</p>
				<p>联系我们： 如果您对我们的团队或服务感兴趣，欢迎访问官网或致电咨询。</p>
              </div>
            </div>
          </div>
        </section>
    </div>
	</div>
</template>

<script>

	export default {
		name: 'EmployeeContent',
	
	}
</script>
<style scoped>
	@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
	
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
   body {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      color: #333;
      line-height: 1.6;
      min-height: 100vh;
      padding: 20px;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }
    
    header {
      background: linear-gradient(90deg, #941C1B 0%, #1EA0FF 100%);
      color: white;
      padding: 40px 30px;
      position: relative;
      overflow: hidden;
    }
    
    .header-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23000" fill-opacity="0.1" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,192C672,181,768,139,864,128C960,117,1056,139,1152,149.3C1248,160,1344,160,1392,160L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
      background-size: cover;
      opacity: 0.2;
    }
    
    .header-content {
      position: relative;
      z-index: 1;
      text-align: center;
    }
    
    .logo {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .logo i {
      margin-right: 15px;
      background: white;
      color: #198754;
      padding: 15px;
      border-radius: 50%;
    }
    
    h1 {
      font-size: 2.2rem;
      margin-bottom: 20px;
      font-weight: 600;
    }
    
    .subtitle {
      font-size: 1.1rem;
      max-width: 800px;
      margin: 0 auto;
      opacity: 0.9;
    }
    
    .training-section {
      padding: 50px 40px;
      border-bottom: 1px solid #e9ecef;
    }
    
    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
    }
    
    .section-title h2 {
      font-size: 1.8rem;
      color: #941C1B;
      display: flex;
      align-items: center;
    }
    
    .section-title i {
      font-size: 1.8rem;
      margin-right: 15px;
      background: #e7f1ff;
      color: #941C1B;
      padding: 12px;
      border-radius: 12px;
    }
    
    .training-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
      margin-top: 20px;
    }
    
    .training-card {
      background: white;
      border-radius: 14px;
      padding: 25px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border-top: 4px solid #941C1B;
    }
    
    .training-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 25px rgba(13, 110, 253, 0.15);
    }
    
    .training-card.green {
      border-top-color: #198754;
    }
    
    .training-card.purple {
      border-top-color: #6f42c1;
    }
    
    .training-card.orange {
      border-top-color: #fd7e14;
    }
    
    .card-title {
      font-size: 1.3rem;
      margin-bottom: 15px;
      color: #212529;
      display: flex;
      align-items: center;
    }
    
    .card-title i {
      margin-right: 10px;
      font-size: 1.2rem;
    }
    
    .card-content {
      color: #495057;
      line-height: 1.7;
    }
    
    .features-list {
      list-style: none;
      margin-top: 15px;
    }
    
    .features-list li {
      padding: 10px 0;
      padding-left: 30px;
      position: relative;
      border-bottom: 1px dashed #e9ecef;
    }
    
    .features-list li:last-child {
      border-bottom: none;
    }
    
    .features-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 10px;
      width: 22px;
      height: 22px;
      background: #e7f1ff;
      color: #941C1B;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
    }
    
    .contact-section {
      padding: 50px 40px;
      background: linear-gradient(135deg, #f1f3f5 0%, #e9ecef 100%);
      text-align: center;
    }
    
    .contact-content {
      max-width: 700px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    }
    
    .contact-title {
      font-size: 1.8rem;
      color: #198754;
      margin-bottom: 25px;
    }
    
    .contact-info {
      font-size: 1.2rem;
      margin: 20px 0;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }
    
    .contact-item i {
      font-size: 1.5rem;
      color: #941C1B;
    }
    
    .btn {
      display: inline-block;
      background: #941C1B;
      color: white;
      padding: 12px 28px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      margin-top: 20px;
      transition: all 0.3s ease;
      border: 2px solid #941C1B;
    }
    
    .btn:hover {
      background: white;
      color: #941C1B;
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
    }
    
    footer {
      text-align: center;
      padding: 20px;
      color: #6c757d;
      font-size: 0.9rem;
      border-top: 1px solid #e9ecef;
    }
    
    @media (max-width: 768px) {
      .training-grid {
        grid-template-columns: 1fr;
      }
      
      .section-title h2 {
        font-size: 1.5rem;
      }
      
      .training-section {
        padding: 30px 20px;
      }
      
      header {
        padding: 30px 20px;
      }
    }
</style>
